<template>
  <!--采购-->
  <div class="pur">
    <!--采购查找-->
    <el-row>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" value-key="value" @change="initData(currPage,pageSize,filterValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option v-for="group in filterOptions" :key="group.value"
                   :label="group.label" :value="group">
        </el-option>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" clearable placeholder="请输入内容" style="width: 150px"></el-input>
      <el-select v-model="vagueValue" placeholder="采购主题" style="width: 120px">
        <el-option v-for="group in vagueOptions" :key="group.value"
                   :label="group.label" :value="group.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage,pageSize,filterValue,content)" icon="el-icon-search" size="small" circle></el-button>
    </el-row>
    <!--新建采购单-->
    <div style="margin-top: 15px;overflow: hidden;">
      <el-col :span="12">
        <span>采购</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="col-sm-6 text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
        <el-button type="text" @click="dialogCopy = true">
          <el-button size="small" icon="el-icon-document-copy">复制采购单</el-button>
        </el-button>
      </el-col>
      <!--采购dialog-->
      <el-dialog title="采购" :visible.sync="dialogFormVisible" @open="openDialog" @close="closeDialog" width="60%" style="color: #333333"  >
        <el-form :model="purchase" ref="pur" label-width="100px" :rules="rules">
          <el-divider><span class="font-14-bold"></span></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="主题:" prop="purchaseTheme">
                <el-input v-model="purchase.purchaseTheme" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="供应商/客户:" prop="customerByCustomerId.customerName">
                <el-input :disabled="true" v-model="purchase.customerByCustomerId.customerName" style="width: 91%"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer">
                <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 20%"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="供应联系人:">
                <el-select v-model="purchase.purchaseContactName"  placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购单号:">
                <el-input :disabled="true" v-model="purchase.purchaseNo" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购日期:">
                <el-date-picker v-model="purchase.purchaseDate" type="date" placeholder="选择日期" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="仓库:" prop="warehouseByWarehouseId">
                <el-select v-model="purchase.warehouseByWarehouseId" value-key="warehouseId" placeholder="未选" style="width: 79%">
                  <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预计到货日期:">
                <el-date-picker v-model="purchase.purchasePredictDate" type="date" placeholder="选择日期" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类:">
                <el-select v-model="purchase.purchaseSort"  placeholder="未选" style="width: 79%">
                  <el-option v-for="item in lxOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经手人:" prop="employeeByEmpId.empName">
                <el-input v-model="purchase.employeeByEmpId.empName" style="width: 79%">
                  <el-button @click="openEmpDialog" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态:" >
                <el-select :disabled="true"  v-model="purchase.purchaseStatus"  placeholder="不可编辑" style="width: 79%">
                  <el-option v-for="item in ztsOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="金额:" prop="purchaseAmount">
                <el-input v-model.number="purchase.purchaseAmount" style="width: 79%">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="付款票据:">
                <el-input :disabled="true" v-model.number="purchase.purchaseBill" style="width: 79%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="已付金额:">
                <el-input :disabled="true" v-model.number="purchase.purchasePaid" style="width: 79%"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="关联订单客户:">
                <el-input v-if="this.purchase.customerByConCustomerId  !== null"  :disabled="true" v-model="purchase.customerByConCustomerId.customerName" style="width: 79%"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer2">
                <el-input v-model="customerValue2" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 40%"></el-input>
                <el-button @click="findConCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible2">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue2}}</span>
                    <span @click="cleanConCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceConCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 === ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible2(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联订单:">
                <el-select v-model="purchase.contractByContractId" value-key="contractId" clearable placeholder="未选" style="width: 79%">
                  <el-option v-for="item in contractList" :key="item.contractId" :label="item.contractTheme" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="备注:">
                <el-input v-model="purchase.purchaseNote" style="width: 91%" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="采购物品明细:" style="width: 92%">
                <el-row v-if="this.purchase.purchaseId === 0" class="gz-style">
                  <div style="float: right">保存后方可编辑明细</div>
                </el-row>
                <el-row v-if="this.purchase.purchaseId !== 0">
                  <el-row>
                    <el-col :span="4" :offset="16">
                      <span class="cursor" @click="openPro(purchase.purchaseId)"><i class="el-icon-edit"></i>编辑明细</span>
                    </el-col>
                    <el-col :span="4">
                      <span class="cursor" @click="printPdf(purchase.purchaseId)"><i class="el-icon-printer"></i>打印单据</span>
                    </el-col>
                  </el-row>
                  <div class="detail">
                    <el-table :data="detailList" style="width: 100%" border show-summary>
                      <el-table-column prop="productByProductId.productName" label="产品名" >
                      </el-table-column>
                      <el-table-column prop="productByProductId.productModel" label="型号" >
                      </el-table-column>
                      <el-table-column prop="productDetailCount" label="数量" >
                      </el-table-column>
                      <el-table-column prop="productDetailIntoNum" label="已入库" >
                      </el-table-column>
                      <el-table-column prop="productDetailOutNum" label="未入库" >
                      </el-table-column>
                      <el-table-column prop="productDetailPrice" label="单价" >
                        <template slot-scope="scope">
                          ￥{{scope.row.productDetailPrice}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="productDetailMoney" label="金额" >
                        <template slot-scope="scope">
                          ￥{{ (scope.row.productDetailMoney = scope.row.productDetailPrice *scope.row.productDetailCount)}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="productDetailRemarks" label="备注" >
                      </el-table-column>
                    </el-table>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="入库情况:" style="width: 92%">
                <el-row v-if="this.purchase.purchaseId === 0" class="gz-style">
                  <div style="float: right">保存后方可编辑明细</div>
                </el-row>
                <el-row v-if="this.purchase.purchaseId !== 0">
                  <div class="detail">
                    <el-table :data="detailList" style="width: 100%" border show-summary>
                    </el-table>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="审批状态:" style="width:91%">
                <div v-if="this.purchase.purchaseId !== 0">
                  <div v-if="this.purchase.purchaseAppStatus === 0">
                    <span>待申请</span>
                    <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
                      <i class="el-icon-more font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.purchase.purchaseAppStatus === 1">
                    <span>待审批</span>
                    <el-tooltip class="item" effect="dark" content="待审批" placement="bottom">
                      <i class="el-icon-s-opportunity font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.purchase.purchaseAppStatus === 2">
                    <span>同意</span>
                    <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
                      <i class="el-icon-circle-check font-18"></i>
                    </el-tooltip>
                    <span>审批人：{{purchase.employeeByAppEmpId.empName}}</span>
                  </div>
                  <div v-if="this.purchase.purchaseAppStatus === 3">
                    <span>否决</span>
                    <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
                      <i class="el-icon-circle-close font-18"></i>
                    </el-tooltip>
                    <span>审批人：{{purchase.employeeByAppEmpId.empName}}</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="审批记录:" style="width:91%">
                <el-row></el-row>
                <el-row :key="index" v-for="(app,index) in approvalRecordList">
                  <div class="border-bo" >
                    <div class="font-13-bold">
                      <span>申请：</span>
                      <span class="margin-r-3">{{app.employeeByApplicantEmpId.empName}}<i class="el-icon-right"/> boss用户</span>
                      <span>{{app.approvalRecordDate | formatDateJudge}}</span>
                    </div>
                    <div class="font-13" v-if="app.employeeByApprovalEmpId !== null">
                      <span class="margin-r-3"><i class="el-icon-minus"/>{{app.employeeByApprovalEmpId.empName}}</span>
                      <span class="margin-r-3">{{app.approvalRecordTime | formatDate}}</span>
                      <span class="margin-r-3">{{app.approvalRecordOper}}</span>
                      <span>备注：{{app.approvalRecordNote}}</span>
                    </div>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button @click="addPurchase" type="primary">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--内层dialog-->
        <el-dialog width="30%" title="供应商选择" :visible.sync="innerDialog" append-to-body>
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
        <!--内层dialog-->
        <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog2" append-to-body>
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceConCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="conCusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
        <!--内层dialog员工-->
        <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body
          @close="closeInnerDialogEmp">
          <div>
            <el-collapse v-model="activeName">
              <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                <ul class="emp-ul">
                  <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                    <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                    <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                    <span class="">{{emp.empName}}</span>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-dialog>
      </el-dialog>
      <!--复制报价单dialog-->
      <el-dialog title="复制报价单" :visible.sync="dialogCopy"
                 @close="closeDialogCopy" width="60%" style="color: #333333"  >
        <el-form :model="copyForm" label-width="100px">
          <el-divider><span class="font-14-bold"></span></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="1.确定源报价单:" label-width="200px">
                <el-radio-group v-model="copyForm.copyIdType">
                  <el-radio :label="1">ID</el-radio>
                  <el-radio :label="2">采购单号</el-radio>
                </el-radio-group>
                <br/>
                <el-input v-model="copyForm.copyNo" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="2.复制到客户:" label-width="200px">
                <el-input :disabled="true" v-model="copyForm.customer.customerName" style="width: 91%"></el-input>
              </el-form-item>
              <div class="form-inline-copy" v-show="isCustomer">
                <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 20%"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button @click="copyPurchaseTips" type="primary">确认</el-button>
                <el-button @click="dialogCopy = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!--内层dialog-->
          <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog" append-to-body>
            <!--选择客户-->
            <el-table :data="customerList" style="width: 100%">
              <el-table-column prop="customerId" label="客户编号" >
              </el-table-column>
              <el-table-column prop="customerName" label="客户名" >
              </el-table-column>
              <el-table-column label="请选择" >
                <template slot-scope="scope">
                  <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top:10px">
              <el-col :span="16">
                <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                               :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
              </el-col>
            </el-row>
          </el-dialog>
        </el-form>
      </el-dialog>
    </div>
    <!--方案表格-->
    <el-table ref="multipleTable" :data="purchaseList" tooltip-effect="dark" id="outTable"
              style="width: 100%" :header-cell-style="rowClass" border @selection-change="handleSelectionChange">
      <el-table-column type="selection"  width="40"></el-table-column>
      <el-table-column prop="purchaseId" label="ID" sortable width="60"></el-table-column>
      <el-table-column label="主题" width="130">
        <template slot-scope="scope">
          <router-link :to="{path:'/purchaseview',query: {purId: scope.row.purchaseId}}">
            <div style="color: #333333">
              <i class="el-icon-caret-right"></i>
              <span>{{scope.row.purchaseTheme}}</span>
            </div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="purchaseDate" label="采购日期" sortable width="105">
        <template slot-scope="scope">
          <span>{{scope.row.purchaseDate | formatDateJudge}}</span>
        </template>
      </el-table-column>
      <el-table-column label="金额" sortable width="90">
        <template slot-scope="scope">
          <span>￥{{scope.row.purchaseAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="已付金额" width="85">
        <template slot-scope="scope">
          <span v-if="scope.row.purchasePaid !== null">￥{{scope.row.purchasePaid}}</span>
        </template>
      </el-table-column>
      <el-table-column label="付款票据" width="85">
        <template slot-scope="scope">
          <span v-if="scope.row.purchasePaid !== null">￥{{scope.row.purchaseBill}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="warehouseByWarehouseId.warehouseName" label="仓库" width="70"></el-table-column>
      <el-table-column label="供应商"  width="130">
        <template slot-scope="scope">
          <div style="color: #333333">
            <span>{{scope.row.customerByCustomerId.customerName}}</span>
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/customerview',query: {customerId: scope.row.customerByCustomerId.customerId}}">
                <span style="color: #333333">
                  <i class="el-icon-s-cooperation"></i>
                </span>
              </router-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByEmpId.empName" label="经手人" ></el-table-column>
      <el-table-column label="分类" >
        <template slot-scope="scope">
          <span v-if="scope.row.purchaseSort === 1">{{lxOptions[0].label}}</span>
          <span v-if="scope.row.purchaseSort === 2">{{lxOptions[1].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="purchaseStatus" label="状态" >
        <template slot-scope="scope">
          <span v-if="scope.row.purchaseStatus === 1">{{ztsOptions[0].label}}</span>
          <span v-if="scope.row.purchaseStatus === 2">{{ztsOptions[1].label}}</span>
          <span v-if="scope.row.purchaseStatus === 3">{{ztsOptions[2].label}}</span>
          <span v-if="scope.row.purchaseStatus === 4">{{ztsOptions[3].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批"  width="50">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
            <span class="font-18" v-if="scope.row.purchaseAppStatus === 0"><i class="el-icon-more"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="待审" placement="bottom">
            <span class="font-18" v-if="scope.row.purchaseAppStatus === 1"><i class="el-icon-s-opportunity"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
            <span class="font-18" v-if="scope.row.purchaseAppStatus === 2"><i class="el-icon-circle-check"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
            <span class="font-18" v-if="scope.row.purchaseAppStatus === 3"><i class="el-icon-circle-close"></i></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="110px">
        <template slot-scope="scope">
          <div v-if="scope.row.purchaseAppStatus !== 2">
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <el-button size="mini" @click="handleEdit(scope.row)"
                         icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <el-button size="mini" @click="handleDelete(scope.row)"
                         icon="el-icon-delete" type="danger" circle></el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="13">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
      <el-col :span="3">
        <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
          <el-button @click="handleWindowPrint('#outTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="批量导出Excel格式数据" placement="bottom">
          <el-button @click="batchExportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-copy"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出Excel格式数据" placement="bottom">
          <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 统计-->
    <el-row>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">分布</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="pieCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="pieValue" @change="changePie(pieValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in pieOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">Top</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="columnarCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="columnarValue" @change="changeColumnar(columnarValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in columnarOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">工具</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="lineCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="lineValue" @change="changeLine(lineValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in lineOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {formatTimeToStr} from "../assets/format";
  import XLSX from "xlsx";
  import FileSaver from "file-saver";
  export default {
    data () {
      return {
        emp:{},
        dialogFormVisible: false,
        dialogCopy:false,
        purchaseList: [], // 采购集合分页
        customerList: [], // 员工客户集合
        contactList: [], // 客户联系人集合
        detailList: [], // 明细集合
        warehouseList: [],// 仓库集合
        contractList: [],// 客户订单集合
        pageSize: 10, // 分页页大小
        pageSizes:[10,20,30],//页大小数组
        currPage: 1, // 当前页码，默认为1
        totalSize: 0, // 总记录数
        cusPageSize: 5, // 分页页大小
        cusCurrPage: 1, // 当前页码，默认为1
        cusTotalSize: 0, // 总记录数
        purchase: {
          purchaseId: 0,
          purchaseTheme: '',
          purchaseNo: '',
          purchaseDate: '',
          purchasePredictDate: '',
          purchaseStatus: '',
          purchaseSort: '',
          purchaseAmount: '',
          purchaseNote: '',
          purchaseContactName: '',
          purchaseBill: 0,
          purchasePaid: 0,
          purchaseAppStatus: 0,
          purchaseReturn: 1,
          customerByCustomerId: {},
          employeeByEmpId: '',
          customerByConCustomerId:null,
          contractByContractId:null,
          employeeByAppEmpId:null,
          warehouseByWarehouseId:''
        },
        approvalRecordList:[],// 审批记录集合
        isCustomer: true, // 客户搜索显示
        isCustomer2:true,
        innerDialog: false,// 内层dialog客户
        innerDialog2: false,// 内层dialog客户
        innerDialogEmp: false,// 内层dialog员工
        activeName: [],
        deptList:[],
        customerValue:'',// 模糊查询客户
        customerValue2:'',// 模糊查询客户
        customerList2:[],// 模糊查询结果
        visible: false,// 模糊搜索结果
        visible2: false,// 模糊搜索结果
        copyForm:{
          copyIdType:1,
          copyNo:'',
          customer:''
        },
        content: '',// input内容
        rules: {
          purchaseTheme: [{
            required: true,
            message: '必须填',
            trigger: 'blur'
          }],
          'customerByCustomerId.customerName': [
            { required: true, message: '请选择客户', trigger: 'blur' }
          ],
          'employeeByEmpId.empName': [
            { required: true, message: '请选择负责人', trigger: 'blur' }
          ],
          purchaseAmount: [
            { required: true, message: '必须填'},
            { type: 'number', message: '必须为数字'}
          ],
          warehouseByWarehouseId: [
            { required: true, message: '必须填', trigger: 'blur' }
          ],
        },
        mulSelection: [],
        lxOptions: [{
          value: 1,
          label: '大宗采购'
        }, {
          value: 2,
          label: '零星采购'
        }],
        ztsOptions: [{
          value: 1,
          label: '1新采购'
        }, {
          value: 2,
          label: '2生成入库单'
        }, {
          value: 3,
          label: '3部分入库'
        }, {
          value: 4,
          label: '4入库完成'
        }],
        filterOptions: [{
          value: 0,
          label: '全部数据',
          num:0
        },{
          value: 1,
          label: '1新采购',
          num:1
        }, {
          value: 2,
          label: '2生成入库单',
          num:2
        }, {
          value: 3,
          label: '3部分入库',
          num:3
        }, {
          value: 4,
          label: '4入库完成',
          num:4
        },{
          value: 5,
          label: '大宗采购',
          num:1
        }, {
          value: 6,
          label: '零星采购',
          num:2
        }, {
          value: 7,
          label: '无退货',
          num:1
        }, {
          value: 8,
          label: '有退货',
          num:2
        },{
          value: 9,
          label: '审批:待申请',
          num:0
        }, {
          value: 10,
          label: '审批:待审批',
          num:1
        }, {
          value: 11,
          label: '审批:同意',
          num:2
        }, {
          value: 12,
          label: '审批:否决',
          num:3
        }],
        filterValue: {value:0,num:0},
        vagueOptions: [{
          value: 1,
          label: '采购主题'
        }],
        vagueValue: 1,
        pieOptions: [{
          value: 1,
          label: '采购单数量分类分布'
        },{
          value: 2,
          label: '采购合约数量对应客户分布'
        },{
          value: 3,
          label: '应付款金额对应客户分布'
        }, {
          value: 4,
          label: '付款计划数量人员分布'
        },{
          value: 5,
          label: '付款计划数量采购单分布'
        },{
          value: 6,
          label: '采购产品金额分布'
        },{
          value: 7,
          label: '采购产品数量分布'
        }],
        pieValue: 1,
        pieList:[],
        pieDataList: [],
        pieNumList: [],
        columnarOptions: [{
          value: 1,
          label: '采购单数量月度统计'
        }, {
          value: 2,
          label: '采购单金额月度统计'
        }, {
          value: 3,
          label: '付款计划金额月度统计'
        }, {
          value: 4,
          label: '付款记录金额月度统计'
        }, {
          value: 5,
          label: '付款记录金额分类统计'
        }, {
          value: 6,
          label: '采购发票金额月度统计'
        },{
          value: 7,
          label: '采购发票金额票据方式统计'
        }],
        columnarValue: 1,
        columnarList: [],
        columnarDataList: [],
        columnarNumList: [],
        columnarName: '数量',
        lineOptions: [{
          value: 1,
          label: '付款计划金额采购单统计'
        }, {
          value: 2,
          label: '付款计划金额人员统计'
        },{
          value: 3,
          label: '付款记录金额采购单统计'
        }, {
          value: 4,
          label: '付款记录金额人员统计'
        }, {
          value: 5,
          label: '采购发票金额采购单统计'
        }, {
          value: 6,
          label: '采购发票金额人员统计'
        }],
        lineValue: 1,
        lineList: [],
        lineDataList: [],
        lineNumList: [],
        selectList:[]
      }
    },
    methods: {
      // 查询当前员工
      loginEmp() {
        this.$axios.get('http://localhost:8088/emp')
          .then(v => {
            this.emp = v.data
          })
          .catch(function (v) {
          })
      },
      // 分页查询所有
      initData(currPage, pageSize,filter,purTheme) {
        this.$axios.get('http://localhost:8088/pur-list', {
          params: {
            page: currPage,
            size: pageSize,
            value: filter.value,
            num: filter.num,
            purTheme:purTheme
          }
        })
          .then(v => {
            this.purchaseList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {
          })
      },
      // 采购表格分页
      changePage(val) {
        this.initData(val, this.pageSize,this.filterValue,this.content)
      },
      //改变页大小
      changeSize(val){
        this.pageSize = val
        this.currPage = 1
        this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
      },
      // 查询联系人
      choiceContact(customerId) {
        this.$axios.get('http://localhost:8088/contact-list', {
          params: {
            customerId: customerId
          }
        })
          .then(v => {
            this.contactList = v.data
          })
          .catch(function (v) {
          })
      },
      // 查询所有详单
      findDetail(purId) {
        this.$axios.get('http://localhost:8088/pur-detail-list', {
          params: {
            purId: purId
          }
        })
          .then(v => {
            this.detailList = v.data
          })
          .catch(function (v) {
          })
      },
      // 查询采购单审批记录集合
      findAppRecord(purId) {
        this.$axios.get('http://localhost:8088/app-record-pur-list', {
          params: {
            purId: purId
          }
        })
          .then(v => {
            this.approvalRecordList = v.data
          })
          .catch(function (v) {
          })
      },
      // 查询所有仓库
      findWarehouse() {
        this.$axios.get('http://localhost:8088/war-list')
          .then(v => {
            this.warehouseList = v.data
          })
          .catch(function (v) {
          })
      },
      // 修改数据回显
      handleEdit(val) {
        this.dialogFormVisible = true
        this.purchase.purchaseId = val.purchaseId
        this.purchase.purchaseTheme = val.purchaseTheme
        this.purchase.purchaseNo = val.purchaseNo
        this.purchase.purchaseDate = val.purchaseDate
        this.purchase.purchasePredictDate = val.purchasePredictDate
        this.purchase.purchaseStatus = val.purchaseStatus
        this.purchase.purchaseSort = val.purchaseSort
        this.purchase.purchaseAmount = val.purchaseAmount
        this.purchase.purchaseNote = val.purchaseNote
        this.purchase.purchaseContactName = val.purchaseContactName
        this.purchase.purchaseBill = val.purchaseBill
        this.purchase.purchasePaid = val.purchasePaid
        this.purchase.purchaseAppStatus = val.purchaseAppStatus
        this.purchase.purchaseReturn = val.purchaseReturn
        this.purchase.customerByCustomerId = val.customerByCustomerId
        this.purchase.employeeByEmpId = val.employeeByEmpId
        if(val.customerByConCustomerId === null){
          this.purchase.customerByConCustomerId = ''
        }else {
          this.purchase.customerByConCustomerId = val.customerByConCustomerId
          this.findContractList(val.customerByConCustomerId.customerId)
        }
        this.purchase.contractByContractId = val.contractByContractId
        this.purchase.employeeByAppEmpId = val.employeeByAppEmpId
        this.purchase.warehouseByWarehouseId = val.warehouseByWarehouseId
        this.choiceContact(val.customerByCustomerId.customerId) // 根据客户名查询联系人集合
        this.findDetail(val.purchaseId)
        this.findAppRecord(val.purchaseId)
        this.isCustomer = false
      },
      // 新增、修改
      addPurchase() {
        if(this.purchase.purchaseId == 0){
          this.purchase.purchaseNo = this.purNo()
          this.purchase.purchaseStatus = 1
        }
        if(this.purchase.customerByConCustomerId === ''){
          this.purchase.customerByConCustomerId = null
        }
        if(this.purchase.contractByContractId === ''){
          this.purchase.contractByContractId = null
        }
        this.$refs.pur.validate((valid) => {
          if (valid) {
            this.$axios.post('http://localhost:8088/save-purchase',
              {
                purchaseId: this. purchase.purchaseId,
                purchaseTheme: this.purchase.purchaseTheme,
                purchaseNo: this.purchase.purchaseNo,
                purchaseDate: this.purchase.purchaseDate,
                purchasePredictDate: this.purchase.purchasePredictDate,
                purchaseStatus: this.purchase.purchaseStatus,
                purchaseSort: this.purchase.purchaseSort,
                purchaseAmount: this.purchase.purchaseAmount,
                purchaseNote: this. purchase.purchaseNote,
                purchaseContactName: this.purchase.purchaseContactName,
                purchaseBill: this.purchase.purchaseBill,
                purchasePaid: this.purchase.purchasePaid,
                purchaseAppStatus: this.purchase.purchaseAppStatus,
                purchaseReturn: this.purchase.purchaseReturn,
                customerByCustomerId: this.purchase.customerByCustomerId,
                employeeByEmpId: this.purchase.employeeByEmpId,
                customerByConCustomerId: this.purchase.customerByConCustomerId,
                contractByContractId: this.purchase.contractByContractId,
                employeeByAppEmpId: this.purchase.employeeByAppEmpId,
                warehouseByWarehouseId: this.purchase.warehouseByWarehouseId,
                productDetailsByPurchaseId: this.detailList
              })
              .then(v => {
                // 1、刷新数据
                this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
                this.purchaseNumBySortData()
                this.purchaseNumByMonthData()
                this.payPlanAmountByPurData()
                this.pieValue = 1
                this.pieList = []
                this.pieDataList = []
                this.pieNumList = []
                this.columnarValue = 1
                this.columnarList = []
                this.columnarDataList = []
                this.columnarNumList = []
                this.columnarName = '数量'
                this.lineValue = 1
                this.lineList = []
                this.lineDataList = []
                this.lineNumList = []
                // 2、关闭弹框
                this.dialogFormVisible = false
                this.$message({
                  message: '已保存',
                  type: 'success'
                });
              })
              .catch(function (v) {
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      // 打开dialog事件
      openDialog() {
        if(this.purchase.purchaseId === 0){
          this.purchase.employeeByEmpId = this.emp
          this.purchase.purchaseDate = this.addDate()
          this.purchase.customerByConCustomerId = ''
        }
        this.findWarehouse()
    },
      // 关闭dialog事件
      closeDialog() {
        this.$refs.pur.resetFields()
        this.purchase = {
          purchaseId: 0,
          purchaseTheme: '',
          purchaseNo: '',
          purchaseDate: '',
          purchasePredictDate: '',
          purchaseStatus: '',
          purchaseSort: '',
          purchaseAmount: '',
          purchaseNote: '',
          purchaseContactName: '',
          purchaseBill: 0,
          purchasePaid: 0,
          purchaseAppStatus: 0,
          purchaseReturn:1,
          customerByCustomerId: {},
          employeeByEmpId: '',
          customerByConCustomerId:null,
          contractByContractId:null,
          employeeByAppEmpId:null,
          warehouseByWarehouseId:''
        }
        this.detailList = []
        this.approvalRecordList = []
        this.isCustomer = true
        this.contactList = []
        this.warehouseList = []
        this.contractList = []
      },
      // 打开内层dialog查询供应商
      innerVisible(cusCurrPage, cusPageSize) {
        this.$axios.get('http://localhost:8088/emp-customer-list', {
          params: {
            page: cusCurrPage,
            size: cusPageSize,
            type:2
          }
        })
          .then(v => {
            this.customerList = v.data.rows
            this.cusTotalSize = v.data.total
          })
          .catch(function (v) {
          })
        this.innerDialog = true
      },
      // 选择供应商
      choiceCustomer(val) {
        if (this.dialogFormVisible === true){
          this.purchase.customerByCustomerId = val
          this.purchase.purchaseContactName = ''
          this.choiceContact(val.customerId)
        }else if(this.dialogCopy === true){
          this.copyForm.customer = val
        }
        this.innerDialog = false;
      },
      // 模糊查询供应商
      findCustomer() {
        if (this.customerValue != '') {
          this.visible = true
          this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
            params: {
              customerName: this.customerValue,
              type:2
            }
          })
            .then(v => {
              this.customerList2 = v.data
            })
            .catch(function (v) {
            })
        } else {
          this.visible = false
        }
      },
      // 模糊选择供应商
      choiceCustomer2(val) {
        if (this.dialogFormVisible === true){
          this.purchase.customerByCustomerId = val
          this.purchase.purchaseContactName = ''
          this.choiceContact(val.customerId)
        }else if(this.dialogCopy === true){
          this.copyForm.customer = val
        }
        this.customerValue = ''
        this.visible = false
      },
      // 失去焦点关闭模糊搜索框
      cleanCustomer() {
        this.visible = false
        this.customerValue = ''
      },
      // 查询供应商分页
      cusChangePage(val) {
        // val就是当前页码
        this.innerVisible(val, this.cusPageSize)
      },
      //查询合同订单
      findContractList (cusId) {
        this.$axios.get('http://localhost:8088/cus-contract-list-all', {
          params: {
            cusId: cusId
          }
        })
          .then(v => {
            this.contractList = v.data
          })
          .catch(function (v) {})
      },
      // 打开内层dialog查询关联订单客户
      innerVisible2(cusCurrPage, cusPageSize) {
        this.$axios.get('http://localhost:8088/emp-customer-list', {
          params: {
            page: cusCurrPage,
            size: cusPageSize,
          }
        })
          .then(v => {
            this.customerList = v.data.rows
            this.cusTotalSize = v.data.total
          })
          .catch(function (v) {
          })
        this.innerDialog2 = true
      },
      // 选择关联订单客户
      choiceConCustomer(val) {
        this.purchase.customerByConCustomerId = val
        this.purchase.contractByContractId = ''
        this.findContractList(val.customerId)
        this.innerDialog2 = false;
      },
      // 模糊查询订单客户
      findConCustomer() {
        if (this.customerValue2 !== '') {
          this.visible2 = true
          this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
            params: {
              customerName: this.customerValue
            }
          })
            .then(v => {
              this.customerList2 = v.data
            })
            .catch(function (v) {
            })
        } else {
          this.visible = false
        }
      },
      // 模糊选择关联订单客户
      choiceConCustomer2(val) {
        this.purchase.customerByConCustomerId = val
        this.purchase.contractByContractId = ''
        this.findContractList(val.customerId)
        this.customerValue2 = ''
        this.visible2 = false
      },
      cleanConCustomer() {
        this.visible2 = false
        this.customerValue2 = ''
      },
      // 查询订单客户分页
      conCusChangePage(val) {
        this.innerVisible2(val, this.cusPageSize)
      },
      //查询部门员工
      findDeptList () {
        this.$axios.get('http://localhost:8088/dept-emp-list')
          .then(v => {
            this.deptList = v.data
            for(let i = 1;i <= this.deptList.length;i++){
              this.activeName.push(i)
            }
          })
          .catch(function (v) {})
      },
      //打开员工dialog
      openEmpDialog(){
        this.innerDialogEmp = true
        this.findDeptList()
      },
      // 选择员工
      choiceEmp(val) {
        this.purchase.employeeByEmpId = val
        this.innerDialogEmp = false;
      },
      //关闭员工diglog事件
      closeInnerDialogEmp(){
        this.activeName = []
      },
      // 点击编辑详单跳转到报价视图
      openPro(purId) {
        this.$router.push({path: '/purchaseview', query: {purId: purId}});
      },
      //关闭复制采购单dialog事件
      closeDialogCopy(){
        this.copyForm = {
          copyIdType:1,
          copyNo:'',
          customer:''
        }
        this.purchase = {
          purchaseId: 0,
          purchaseTheme: '',
          purchaseNo: '',
          purchaseDate: '',
          purchasePredictDate: '',
          purchaseStatus: '',
          purchaseSort: '',
          purchaseAmount: '',
          purchaseNote: '',
          purchaseContactName: '',
          purchaseBill: 0,
          purchasePaid: 0,
          purchaseAppStatus: 0,
          purchaseReturn: 1,
          customerByCustomerId: {},
          employeeByEmpId: '',
          customerByConCustomerId:null,
          contractByContractId:null,
          employeeByAppEmpId:null,
          warehouseByWarehouseId:''
        }
        this.detailList = []
      },
      // 复制采购单判断
      copyPurchaseTips () {
        if (this.copyForm.customer === ''){
          this.$message({
            message: '客户不能为空',
          });
        }else if (this.copyForm.copyNo === '') {
          this.$message({
            message: '采购单不能为空',
          })
        }else if (this.copyForm.copyIdType === 1){
          if (/^[0-9]{1,20}$/.exec(this.copyForm.copyNo)){
            this.findPurchaseById()
          }else {
            this.dialogCopy = false
            this.$message({
              message: 'id错误',
            })
          }
        }else if (this.copyForm.copyIdType === 2) {
          this.findPurchaseByNo()
        }
      },
      //查询采购单根据ID
      findPurchaseById(){
        this.$axios.get('http://localhost:8088/pur-id', {
          params: {
            purId: this.copyForm.copyNo
          }
        })
          .then(v => {
            if (v.data.length === 0){
              this.dialogCopy = false
              this.$message({
                message: '数据不存在',
              })
            }else {
              this.purchase = v.data
              this.findDetailByCopy(this.purchase.purchaseId)
              this.purchase.purchaseId = 0
              this.purchase.customerByCustomerId = this.copyForm.customer
              this.purchase.purchaseContactName = null
              this.purchase.purchaseNo = this.purNo()
              this.purchase.purchaseDate = this.addDate()
              this.purchase.purchasePredictDate = ''
              this.purchase.employeeByEmpId = this.emp
              this.purchase.purchaseStatus = 1
              this.purchase.purchaseBill = 0
              this.purchase.purchasePaid = 0
              this.purchase.customerByConCustomerId = null
              this.purchase.contractByContractId = null
              this.purchase.purchaseAppStatus = 0
              this.purchase.employeeByAppEmpId = null
            }
          })
          .catch(function (v) {
          })
      },
      //查询采购单根据采购单号
      findPurchaseByNo(){
        this.$axios.get('http://localhost:8088/pur-no', {
          params: {
            purNo: this.copyForm.copyNo
          }
        })
          .then(v => {
            if (v.data.length === 0){
              this.dialogCopy = false
              this.$message({
                message: '数据不存在',
              })
            }else {
              this.purchase = v.data
              this.findDetailByCopy(this.purchase.purchaseId)
              this.purchase.purchaseId = 0
              this.purchase.customerByCustomerId = this.copyForm.customer
              this.purchase.purchaseContactName = null
              this.purchase.purchaseNo = this.purNo()
              this.purchase.purchaseDate = this.addDate()
              this.purchase.purchasePredictDate = ''
              this.purchase.employeeByEmpId = this.emp
              this.purchase.purchaseStatus = 1
              this.purchase.purchaseBill = 0
              this.purchase.purchasePaid = 0
              this.purchase.customerByConCustomerId = null
              this.purchase.contractByContractId = null
              this.purchase.purchaseAppStatus = 0
              this.purchase.employeeByAppEmpId = null
            }
          })
          .catch(function (v) {
          })
      },
      // 复制采购查询所有详单
      findDetailByCopy(purId) {
        this.$axios.get('http://localhost:8088/pur-detail-list', {
          params: {
            purId: purId
          }
        })
          .then(v => {
            this.detailList = v.data
            this.copyPurchase()
          })
          .catch(function (v) {
          })
      },
      //复制采购
      copyPurchase(){
        this.$axios.post('http://localhost:8088/save-purchase',
          {
            purchaseId: this. purchase.purchaseId,
            purchaseTheme: this.purchase.purchaseTheme,
            purchaseNo: this.purchase.purchaseNo,
            purchaseDate: this.purchase.purchaseDate,
            purchasePredictDate: this.purchase.purchasePredictDate,
            purchaseStatus: this.purchase.purchaseStatus,
            purchaseSort: this.purchase.purchaseSort,
            purchaseAmount: this.purchase.purchaseAmount,
            purchaseNote: this. purchase.purchaseNote,
            purchaseContactName: this.purchase.purchaseContactName,
            purchaseBill: this.purchase.purchaseBill,
            purchasePaid: this.purchase.purchasePaid,
            purchaseAppStatus: this.purchase.purchaseAppStatus,
            purchaseReturn: this.purchase.purchaseReturn,
            customerByCustomerId: this.purchase.customerByCustomerId,
            employeeByEmpId: this.purchase.employeeByEmpId,
            customerByConCustomerId: this.purchase.customerByConCustomerId,
            contractByContractId: this.purchase.contractByContractId,
            employeeByAppEmpId: this.purchase.employeeByAppEmpId,
            warehouseByWarehouseId: this.purchase.warehouseByWarehouseId,
            productDetailsByPurchaseId: this.detailList
          })
          .then(v => {
            // 1、刷新数据
            this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
            this.dialogCopy = false
            this.purchaseNumBySortData()
            this.purchaseNumByMonthData()
            this.payPlanAmountByPurData()
            this.pieValue = 1
            this.pieList = []
            this.pieDataList = []
            this.pieNumList = []
            this.columnarValue = 1
            this.columnarList = []
            this.columnarDataList = []
            this.columnarNumList = []
            this.columnarName = '数量'
            this.lineValue = 1
            this.lineList = []
            this.lineDataList = []
            this.lineNumList = []
            this.$message({
              message: '复制成功',
              type: 'success'
            });
          })
          .catch(function (v) {
          })
      },
      // 删除提示
      handleDelete(val) {
        this.$confirm('此操作将永久删除该采购, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deletePur(val.purchaseId)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 批量删除提示
      handleDeleteMany() {
        this.$confirm('此操作将永久删除勾选采购单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteAll()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 获取批量删除对象集合
      handleSelectionChange(val) {
        this.mulSelection = val
      },
      // 删除axios
      deletePur(purId) {
        this.$axios.post('http://localhost:8088/delete-purchase',
          this.qs.stringify({purchaseId: purId}))
          .then(v => {
            this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
          })
          .catch(function (v) {
          })
      },
      // 删除所有
      deleteAll() {
        this.mulSelection.forEach(row => {
          if(row.purchaseAppStatus === 2){
            this.$refs.multipleTable.clearSelection();
            this.$message({
              type: 'info',
              message: 'ID为'+row.purchaseId+'的数据已审核通过，无法删除'
            })
          }else {
            this.deletePur(row.purchaseId)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      },
      // 切换饼状图
      changePie (val){
        this.pieDataList = []
        this.pieNumList = []
        if (val === 1){
          this.purchaseNumBySortData()
        }else if (val === 2){
          this.purchaseNumBySigningByCusData()
        }else if (val === 3){
          this.payPlanAmountStaByCusData()
        }else if (val === 4){
          this.paymentPlanNumByEmpData()
        }else if (val === 5){
          this.paymentPlanNumByPurData()
        }else if (val === 6) {
          this.prodDetailAmountByProData()
        }else if (val === 7) {
          this.prodDetailNumByProData()
        }
      },
      // 查询数据-采购数量分类分布
      purchaseNumBySortData() {
        this.$axios.get('http://localhost:8088/compute-pur-num-sort')
          .then(v => {
            this.pieList = v.data
            //计算
            this.computePurchaseNumBySort()
          })
          .catch(function (v) {})
      },
      // 计算-采购数量分类分布
      computePurchaseNumBySort (){
        for(let i=0;i<this.pieList.length;i++) {
          if (this.pieList[i].datas === 1){
            this.pieDataList.push('大宗采购');
            this.pieNumList.push({value:this.pieList[i].num,name:'大宗采购'})
          }else if (this.pieList[i].datas === 2){
            this.pieDataList.push('零星采购');
            this.pieNumList.push({value:this.pieList[i].num,name:'零星采购'})
          }else{
            this.pieDataList.push('');
            this.pieNumList.push({value:this.pieList[i].num,name:''})
          }
        }
      },
      // 查询数据-采购合约数量对应客户分布
      purchaseNumBySigningByCusData() {
        this.$axios.get('http://localhost:8088/compute-pur-num-sing-cus')
          .then(v => {
            this.pieList = v.data
            //计算
            this.computeAlikePie()
          })
          .catch(function (v) {})
      },
      // 查询数据-应付款金额对应客户排行
      payPlanAmountStaByCusData() {
        this.$axios.get('http://localhost:8088/compute-pay-plan-amount-wf-cus')
          .then(v => {
            this.pieList = v.data
            //计算
            this.computeAlikePie()
          })
          .catch(function (v) {})
      },
      // 查询数据-付款计划数量人员分布
      paymentPlanNumByEmpData() {
        this.$axios.get('http://localhost:8088/compute-pay-plan-num-emp')
          .then(v => {
            this.pieList = v.data
            //计算
            this.computeAlikePie()
          })
          .catch(function (v) {})
      },
      // 查询数据-付款计划数量采购单分布
      paymentPlanNumByPurData() {
        this.$axios.get('http://localhost:8088/compute-pay-plan-num-pur')
          .then(v => {
            this.pieList = v.data
            //计算
            this.computeAlikePie()
          })
          .catch(function (v) {})
      },
      // 查询数据-采购产品金额分布
      prodDetailAmountByProData() {
        this.$axios.get('http://localhost:8088/compute-pro-amount')
          .then(v => {
            this.pieList = v.data
            //计算
            this.computeAlikePie()
          })
          .catch(function (v) {})
      },
      // 查询数据-采购产品数量分布
      prodDetailNumByProData() {
        this.$axios.get('http://localhost:8088/compute-pro-num')
          .then(v => {
            this.pieList = v.data
            //计算
            this.computeAlikePie()
          })
          .catch(function (v) {})
      },
      // 计算饼状体数据-通用
      computeAlikePie (){
        for(let i=0;i<this.pieList.length;i++) {
          this.pieDataList.push(this.pieList[i].datas);
          this.pieNumList.push({value:this.pieList[i].num,name:this.pieList[i].datas})
        }
      },
      // 饼状图
      pieCharts () {
        let myChart = this.$echarts.init(this.$refs.pieCharts)
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: this.pieDataList
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: this.pieNumList,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      // 切换柱状图
      changeColumnar(val){
        this.columnarDataList = []
        this.columnarNumList = []
        if (val === 1){
          this.columnarName = '数量'
          this.purchaseNumByMonthData()
        }else if(val === 2){
          this.columnarName = '金额￥'
          this.purchaseAmountByMonthData()
        }else if(val === 3){
          this.columnarName = '金额￥'
          this.payPlanAmountByMonthData()
        }else if(val === 4){
          this.columnarName = '金额￥'
          this.payRecordsAmountByMonthData()
        }else if(val === 5){
          this.columnarName = '金额￥'
          this.payRecordsAmountByClassifyData()
        }else if(val === 6){
          this.columnarName = '金额￥'
          this.payInvoiceAmountByMonthData()
        }else if(val === 7){
          this.columnarName = '金额￥'
          this.payInvoiceAmountByPaperTypeData()
        }
      },
      // 查询数据-采购单数量月度
      purchaseNumByMonthData() {
        this.$axios.get('http://localhost:8088/compute-pur-num-month')
          .then(v => {
            this.columnarList = v.data
            //计算
            this.computeAlikeColumnar()
          })
          .catch(function (v) {})
      },
      // 查询数据-采购金额月度
      purchaseAmountByMonthData() {
        this.$axios.get('http://localhost:8088/compute-pur-amount-month')
          .then(v => {
            this.columnarList = v.data
            //计算
            this.computeAlikeColumnar()
          })
          .catch(function (v) {})
      },
      // 查询数据-付款计划金额月度
      payPlanAmountByMonthData() {
        this.$axios.get('http://localhost:8088/compute-pay-plan-amount-month')
          .then(v => {
            this.columnarList = v.data
            //计算
            this.computeAlikeColumnar()
          })
          .catch(function (v) {})
      },
      // 查询数据-付款记录金额月度
      payRecordsAmountByMonthData() {
        this.$axios.get('http://localhost:8088/compute-pay-records-amount-month')
          .then(v => {
            this.columnarList = v.data
            //计算
            this.computeAlikeColumnar()
          })
          .catch(function (v) {})
      },
      // 查询数据-付款记录金额分类
      payRecordsAmountByClassifyData() {
        this.$axios.get('http://localhost:8088/compute-pay-records-amount-classify')
          .then(v => {
            this.columnarList = v.data
            //计算
            this.computePayRecordsAmountByClassify()
          })
          .catch(function (v) {})
      },
      // 计算-付款记录金额分类
      computePayRecordsAmountByClassify (){
        for(let i=0;i<this.columnarList.length;i++) {
          if (this.columnarList[i].datas === 1){
            this.columnarDataList.push('购物款');
            this.columnarNumList.push(this.columnarList[i].num)
          }else if (this.columnarList[i].datas === 2){
            this.columnarDataList.push('转账');
            this.columnarNumList.push(this.columnarList[i].num)
          }else if (this.columnarList[i].datas === 3){
            this.columnarDataList.push('抵债付款');
            this.columnarNumList.push(this.columnarList[i].num)
          }
        }
      },
      // 查询数据-采购发票金额月度
      payInvoiceAmountByMonthData() {
        this.$axios.get('http://localhost:8088/compute-pay-invoice-amount-month')
          .then(v => {
            this.columnarList = v.data
            //计算
            this.computeAlikeColumnar()
          })
          .catch(function (v) {})
      },
      // 查询数据-采购发票票据类型
      payInvoiceAmountByPaperTypeData() {
        this.$axios.get('http://localhost:8088/compute-pay-invoice-amount-type')
          .then(v => {
            this.columnarList = v.data
            //计算
            this.computePayInvoiceAmountByPaperType()
          })
          .catch(function (v) {})
      },
      // 计算-采购发票票据类型
      computePayInvoiceAmountByPaperType (){
        for(let i=0;i<this.columnarList.length;i++) {
          if (this.columnarList[i].datas === 1){
            this.columnarDataList.push('增值');
            this.columnarNumList.push(this.columnarList[i].num)
          }else if (this.columnarList[i].datas === 2){
            this.columnarDataList.push('普通国税');
            this.columnarNumList.push(this.columnarList[i].num)
          }else if (this.columnarList[i].datas === 3){
            this.columnarDataList.push('普通地税');
            this.columnarNumList.push(this.columnarList[i].num)
          }else if (this.columnarList[i].datas === 4){
            this.columnarDataList.push('收据');
            this.columnarNumList.push(this.columnarList[i].num)
          }
        }
      },
      // 计算柱状图数据-通用
      computeAlikeColumnar (){
        for(let i=0;i<this.columnarList.length;i++) {
          this.columnarDataList.push(this.columnarList[i].datas);
          this.columnarNumList.push(this.columnarList[i].num)
        }
      },
      // 柱状图
      columnarCharts (){
        let myChart = this.$echarts.init(this.$refs.columnarCharts)
        // 绘制图表0
        myChart.setOption({
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.columnarDataList,
              /* (function(){
                 this.findDateData()
                 let arr=[];
                 for(let i=0;i<this.findDateList.length;i++){
                   arr.push(this.findDateList[i].dates);
                 }
                 return arr;
               })(),*/
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: this.columnarName,
              type: 'bar',
              barWidth: '60%',
              data: this.columnarNumList,
            }
          ]
        })
      },
      // 切换折线图
      changeLine(val){
        this.lineDataList = []
        this.lineNumList = []
        if (val === 1){
          this.payPlanAmountByPurData()
        }else if(val === 2){
          this.payPlanAmountByEmpData()
        }else if(val === 3){
          this.payRecordsAmountByPurData()
        }else if(val === 4){
          this.payRecordsAmountByEmpData()
        }else if(val === 5){
          this.payInvoiceAmountByPurData()
        }else if(val === 6){
          this.payInvoiceAmountByEmpData()
        }
      },
      // 查询数据-付款记录金额采购单
      payPlanAmountByPurData() {
        this.$axios.get('http://localhost:8088/compute-pay-plan-amount-pur')
          .then(v => {
            this.lineList = v.data
            //计算
            this.computeAlikeLine()
          })
          .catch(function (v) {})
      },
      // 查询数据-计算付款计划金额人员
      payPlanAmountByEmpData() {
        this.$axios.get('http://localhost:8088/compute-pay-plan-amount-emp')
          .then(v => {
            this.lineList = v.data
            //计算
            this.computeAlikeLine()
          })
          .catch(function (v) {})
      },
      // 查询数据-计算付款记录金额采购单
      payRecordsAmountByPurData() {
        this.$axios.get('http://localhost:8088/compute-pay-records-amount-pur')
          .then(v => {
            this.lineList = v.data
            //计算
            this.computeAlikeLine()
          })
          .catch(function (v) {})
      },
      // 查询数据-计算付款记录金额人员
      payRecordsAmountByEmpData() {
        this.$axios.get('http://localhost:8088/compute-pay-records-amount-emp')
          .then(v => {
            this.lineList = v.data
            //计算
            this.computeAlikeLine()
          })
          .catch(function (v) {})
      },
      // 查询数据-采购发票金额采购单
      payInvoiceAmountByPurData() {
        this.$axios.get('http://localhost:8088/compute-pay-invoice-amount-pur')
          .then(v => {
            this.lineList = v.data
            //计算
            this.computeAlikeLine()
          })
          .catch(function (v) {})
      },
      // 查询数据-计算采购发票金额人员
      payInvoiceAmountByEmpData() {
        this.$axios.get('http://localhost:8088/compute-pay-invoice-amount-emp')
          .then(v => {
            this.lineList = v.data
            //计算
            this.computeAlikeLine()
          })
          .catch(function (v) {})
      },
      // 计算折线图数据-通用
      computeAlikeLine (){
        for(let i=0;i<this.lineList.length;i++) {
          this.lineDataList.push(this.lineList[i].datas);
          this.lineNumList.push(this.lineList[i].num)
        }
      },
      //折线图
      lineCharts (){
        let myChart = this.$echarts.init(this.$refs.lineCharts)
        // 绘制图表0
        myChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['状态']
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.lineDataList
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [
            {
              name: '金额￥',
              type: 'line',
              data: this.lineNumList,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },

            }
          ]
        })
      },
      // 采购单号
      purNo() {
        var purNo = "";
        for (var i = 0; i < 4; i++) //j位随机数，用以加在时间戳后面。
        {
          purNo += Math.floor(Math.random() * 10);
        }
        purNo = 'CG' + this.addDateNo() + purNo;
        return purNo;
      },
      // 获取当前日期格式20200206
      addDateNo () {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year  + month  + strDate;
        return currentdate;
      },
      // 获取当前日期
      addDate () {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
        var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
        var currentdate = date.getFullYear() + seperator1  + month  + seperator1  + strDate
        return currentdate
      },
      // 导出PDF
      printPdf(val){
        this.$router.push({path: '/printpurchase', query: {purId: val}});
      },
      // pdf打印
      handleWindowPrint (ele, fileName) {
        document.body.innerHTML = document.querySelector(ele).outerHTML
        // 转异步 等待dom元素渲染（样式）完毕在打印
        setTimeout(() => {
          // 打印
          window.print()
          // 刷新页面
          window.location.reload()
        }, 20)
      },
      //导出excel
      exportExcel () {
        var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
        var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
            "采购导出.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },
      //批量导出excel batchList
      batchExportExcel(){
        this.mulSelection.forEach((item,i)=>{
          this.$set(item,'purchaseId',item.purchaseId);
          this.$set(item,'purchaseTheme',item.purchaseTheme)
          this.$set(item,'purchaseDate',item.purchaseDate);
          this.$set(item,'purchaseAmount','￥'+item.purchaseAmount);
          this.$set(item,'purchasePaid','￥'+item.purchasePaid);
          this.$set(item,'purchaseBill','￥'+item.purchaseBill);
          this.$set(item,'warehouseName',item.warehouseByWarehouseId.warehouseName);
          this.$set(item,'customerName',item.customerByCustomerId.customerName);
          this.$set(item,'empName',item.employeeByEmpId.empName);
          if(item.purchaseSort !== null){
            this.$set(item,'purchaseSort',this.lxOptions[item.purchaseSort - 1].label);
          }
          if(item.purchaseStatus !== null){
            this.$set(item,'purchaseStatus',this.ztsOptions[item.purchaseStatus - 1].label);
          }
          if (item.purchaseAppStatus === 0){
            this.$set(item,'purchaseAppStatus','待申请');
          }else if(item.purchaseAppStatus === 1){
            this.$set(item,'purchaseAppStatus','待审批');
          }else if(item.purchaseAppStatus === 2){
            this.$set(item,'purchaseAppStatus','同意');
          }else if(item.purchaseAppStatus === 3){
            this.$set(item,'purchaseAppStatus','否决');
          }
          this.selectList.splice(i,0,item);
        })
        //excel数据导出
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('../js/Export2Excel');
          const tHeader = ['ID','主题','采购日期','金额','已付金额','付款票据','仓库','供应商','经手人','分类','状态','审批'];
          const filterVal = ['purchaseId','purchaseTheme','purchaseDate','purchaseAmount','purchasePaid','purchaseBill','warehouseName',
            'customerName','empName','purchaseSort','purchaseStatus','purchaseAppStatus'];
          const list = this.selectList;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '采购批量导出');
        })
        this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      // 表头靠左样式
      rowClass(){
        return "text-align:left"
      }
    },
    created() {
      this.loginEmp()
      this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
      this.purchaseNumBySortData()
      this.purchaseNumByMonthData()
      this.payPlanAmountByPurData()
    },
    updated() {
      this.pieCharts()
      this.columnarCharts()
      this.lineCharts()
    },
    watch:{
      pieList(val){
        this.pieCharts()
      },
      columnarList(val) {
        this.columnarCharts()
      },
      lineList(val){
        this.lineCharts()
      }
    },
    filters: {
      formatDate: function(time) {
        if(time!=null&&time!="")
        {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
        }else{
          return "";
        }
      },
      formatDateJudge: function(time) {
        if(time != null && time != "")
        {
          let date = new Date(time);
          let currentDate = new Date()
          let seperator1 = "-";
          let month = currentDate.getMonth() + 1<10? "0"+(currentDate.getMonth() + 1):currentDate.getMonth() + 1;
          let strDate = currentDate.getDate()<10? "0" + currentDate.getDate():currentDate.getDate();
          let today = currentDate.getFullYear() + seperator1  + month  + seperator1  + strDate
          let todayTime = new Date(today)
          let yesterday = todayTime.setDate(todayTime.getDate() - 1)
          let beforeYesterday = todayTime.setDate(todayTime.getDate() - 1)
          let tomorrow = todayTime.setDate(todayTime.getDate() + 3)
          let afterTomorrow = todayTime.setDate(todayTime.getDate() + 1)
          todayTime.setDate(todayTime.getDate() - 2)
          if (date.getTime() === todayTime.getTime()){
            return '今天'
          }else if (date.getTime() ===  yesterday){
            return '昨天'
          }else if (date.getTime() ===  beforeYesterday){
            return '前天'
          }else if (date.getTime() ===  tomorrow){
            return '明天'
          }else if (date.getTime() ===  afterTomorrow){
            return '后天'
          }else {
            return time
          }
        }else{
          return "";
        }
      }
    }
  }
</script>

<style>
</style>

